<template>
    <div class="container">
        <!-- 搜索框 -->
        <div class="headers">
            <div class="text">
                <input type="text" class="search-left" placeholder="请输入要搜索的内容">
                <input type="button" class="search-right" value="搜 索" icon="el-icon-search">
            </div>
            <div class="hfood">
                <div class="xiao">宅家烧烤</div>
                <div class="xiao">早餐面包</div>
                <div class="xiao">小龙虾</div>
                <div class="xiao">方便净菜</div>
                <div class="xiao">六一儿童家</div>
            </div>
        </div>
        <!-- 轮播图 -->
        <div class="slideshow">
            <el-carousel height="150px">
                <el-carousel-item>
                    <img src="../../public/image/3da2b49ebd3cac66d2b5373e95308fa.jpg" width="90%" height="150px" class="img">
                </el-carousel-item>
                <el-carousel-item>
                    <img src="../../public/image/53436f8f1f04085e413f7f956c4be90.jpg" width="90%" height="150px" class="img">
                </el-carousel-item>
                <el-carousel-item>
                    <img src="../../public/image/fbf79bb313ae9c235635f027bd7acf5.jpg" width="90%" height="150px" class="img">
                </el-carousel-item>
            </el-carousel>
        </div>
        <!-- 分类 -->
        <div class="cate">
            <div v-for="i in 8" class="cates">
                <div>
                    <el-avatar :size="60" :src="require('../../public/image/a01bf044b8a03f35aea21fa14151f94.jpg')"></el-avatar>
                </div>
                <div>蔬菜豆制品</div>
            </div>
        </div>
        <!-- 图片1 -->
        <div class="image">
            <img src="../../public/image/3da2b49ebd3cac66d2b5373e95308fa.jpg" width="90%" height="100px" class="img">
        </div>
        <!-- 活动 -->
        <div class="huo">
            <!-- 限时秒杀 -->
            <div class="huo1">
                <div class="kill">
                    <div style="font-weight:550;margin-left: 10px;margin-top:10px;background-color: #ccc;">限时秒杀</div>
                    <div style="margin-left:10px;padding-top: 10px;">
                        <span style="background-color:red;color:white;padding:0px 3px;font-size: 14px">{{h}}</span> 
                        <span style="color:red">:</span> 
                        <span style="background-color:red;color:white;padding:0px 3px;font-size: 14px">{{m}}</span> 
                        <span style="color:red">:</span> 
                        <span style="background-color:red;color:white;padding:0px 3px;font-size: 14px;">{{s}}</span> 
                    </div>
                </div>
                <div style="font-size:14px;color:#666;padding-left: 10px;">每日低价促销</div>
                <div>
                    <div class="sha">
                        <div v-for="i in 2" class="miao">
                            <div>
                                <el-avatar :size="60" :src="require('../../public/image/a01bf044b8a03f35aea21fa14151f94.jpg')"></el-avatar>
                            </div>
                            <div>
                               <span style="color:red;font-size: 14px;">￥69</span> <span style="color:#666;font-size: 10px;"><s>￥239</s></span> 
                            </div>
                      </div>
                    </div>
                    
                </div>
            </div>
            <!-- 好物直播 -->
            <div class="hou1">
                <div class="kill">
                    <div style="font-weight:550;margin-left: 10px;margin-top:10px;background-color: #ccc;">好物直播</div>
                    <div style="margin-left:10px;margin-top: 10px;background-color:red;color:white;">精选商品</div>
                </div>
                <div style="font-size:14px;color:#666;padding-left: 10px;">互动赢好礼</div>
                <div class="good">
                    <div>
                        <div>
                            <img src="../../public/image/3da2b49ebd3cac66d2b5373e95308fa.jpg" width="70px" height="70px">
                        </div>
                        <div style="color:#666;font-size:14px">200人</div>
                    </div>
                    <div style="margin-left:10px">
                        <div>
                            <img src="../../public/image/3da2b49ebd3cac66d2b5373e95308fa.jpg" width="70px" height="70px">
                        </div>
                        <div style="color:#666;font-size:14px">200人</div>
                    </div>
                </div>
            </div>
            <!-- 热销榜单 -->
            <div class="hou1">
                <div style="font-weight:550;margin-left: 10px;margin-top:10px;">热销榜单</div>
                <div style="font-size:14px;color:#666;padding-left: 10px;">大家都喜欢</div>
                <div class="good">
                    <div>
                        <div>
                            <img src="../../public/image/3da2b49ebd3cac66d2b5373e95308fa.jpg" width="70px" height="70px">
                        </div>
                        <div style="color:#666;font-size:14px">200人</div>
                    </div>
                    <div style="margin-left:10px">
                        <div>
                            <img src="../../public/image/3da2b49ebd3cac66d2b5373e95308fa.jpg" width="70px" height="70px">
                        </div>
                        <div style="color:#666;font-size:14px">200人</div>
                    </div>
                </div>
            </div>
            <!-- 新品上架 -->
            <div class="hou1">
                <div style="font-weight:550;margin-left: 10px;margin-top:10px;">新品上架</div>
                <div style="font-size:14px;color:#666;padding-left: 10px;">买就送100元好礼</div>
                <div>
                    <div class="good">
                    <div>
                        <div>
                            <img src="../../public/image/3da2b49ebd3cac66d2b5373e95308fa.jpg" width="70px" height="70px">
                        </div>
                        <div style="color:#666;font-size:14px">200人</div>
                    </div>
                    <div style="margin-left:10px">
                        <div>
                            <img src="../../public/image/3da2b49ebd3cac66d2b5373e95308fa.jpg" width="70px" height="70px">
                        </div>
                        <div style="color:#666;font-size:14px">200人</div>
                    </div>
                </div>
                </div>
            </div>
        </div>
        <!-- 图片2 -->
        <div class="image">
            <img src="../../public/image/e25520fc33cfb5bcee19426f4caa6e6.jpg" width="90%" height="100px" class="img">
        </div>
        <!-- 活动专区 -->
        <div class="zhuan">
            <div style="margin-left:30px;margin-top: 10px;">活动专区</div>
            <div class="dong">
                <div v-for="i in 4" class="qu">
                    <div>
                        <div>体闲食品</div>
                        <div>爆品直降</div>
                        <div><el-tag type="success" size="mini">立即查看</el-tag></div>
                    </div>
                    <div>
                            <img src="../../public/image/3da2b49ebd3cac66d2b5373e95308fa.jpg" width="70px" height="70px">
                        </div>
                </div>
            </div>
        </div>
        <!-- 热销商品 -->
        <div class="hot">
            <div style="text-align:center">--热销商品--</div>
            <div class="huan">
                <div class="xun" v-for="i in 4" @click="btn">
                <div>
                    <img src="../../public/image/3da2b49ebd3cac66d2b5373e95308fa.jpg" width="150px" height="200px">
                </div>
                <div style="font-size:14px;text-align:left">陕西黄小米溯源2.5kg</div>
                <div style="font-size:10px;color:#666;text-align:left">吃的小米粥真空包装</div>
                <div class="jia">
                    <div>￥19.90</div>
                    <div>
                        <el-button type="success" icon="el-icon-shopping-cart-1" size="mini" circle></el-button>
                    </div>
                </div>
            </div>
            </div>
        </div>
        <div></div>
    </div>
</template>

<script>
export default {
    name: '',
    data() {
        return {
            seconds:86400,
            count:"",
            h:"",
            m:"",
            s:""
        };
    },
    props: {},

    components: {},

    created() {},

    mounted() {
        this.Time()
    },

    methods: {
        countDown(){
            let h = parseInt(this.seconds / (60 * 60) % 24);
            this.h = h < 10 ? '0' + h : h
            let m = parseInt(this.seconds / 60 % 60);
            this.m = m < 10 ? '0' + m : m
            let s = parseInt(this.seconds % 60);
            this.s = s < 10 ? '0' + s : s
            this.count = h + ":" + m + ":" + s
        },
        Time(){
            setInterval(() => {
                this.seconds -= 1
                this.countDown()
            },1000)
        },
        btn(){
            this.$router.push("/info")
        }
    },

    computed: {},

    watch: {},

    directives: {},

    filters: {}
};
</script>

<style scoped>
    .container{
        background-color: rgb(238, 238, 238);
    }
    .headers{
        background-color: #00c264e4;
        position: fixed;
        width: 100%;
        top: 0;
        left: 0;
        z-index: 100;
    }
    .text{   
     margin:0 auto; 
     width: 100%;
     display: flex;
    }
    .search-left{
        text-indent: 20px;
        width:80%;
        height:30px;
        margin-top:20px;
        margin-bottom: 10px;
        margin-left: 10px;
        border:none;
        border-bottom-left-radius:20px;
        border-top-left-radius:20px;
        outline:none;
    }
    .search-right{
        width:19%;
        height:32px;
        border:none;
        margin-top:20px;
        margin-bottom: 10px;
        margin-right: 10px;
        border-bottom-right-radius:20px;
        border-top-right-radius:20px;
        outline:none;
    }
    .hfood{
        display: flex;
        justify-content: space-between;
        margin-left: 10px;
    }
    .xiao{
        background-color: white;
        color: #23ae6f;
        font-size: 10px;
        padding-left:5px;
        padding-right: 5px;
        margin-bottom: 20px;
        border-radius: 20px;
    }
    .slideshow{
        margin-top: 100px;
        margin-bottom: 10px;
        text-align: center;
    }
    .img{
        border-radius: 10px;
    }
    .cate{
        text-align: center;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        background-color: white;
        width: 90%;
        margin: 0 auto;
        border-radius: 10px;
    }
    .cates{
        width: 25%;
        font-size: 14px;
        padding: 10px 0px;
    }
    .image{
        text-align: center;
        margin-top: 10px;
    }
    .huo{
        margin-top: 20px;
        margin-bottom: 20px;
        background-color: white;
        border-radius: 10px;
        width: 90%;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .kill{
        display: flex;
    }
    .hou1{
        width: 45%;
    }
    .sha{
        display: flex;
        margin-top: 10px;

    }
    .good{
        display: flex;
        margin-left: 10px;
    }
    .miao{
        margin-left: 10px;
    }
    .dong{
        display: flex;
        flex-wrap: wrap;
        margin: 0 auto;
        width: 90%;
        margin-bottom: 10px;
    }
    .qu{
        width: 40%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 14px;
        text-align: center;
        margin-top: 10px;
        background-color: white;
        padding:10px;
        margin:6px;
        border-radius: 10px;
    }
    .jia{
        display: flex;
        justify-content: space-between;
    }
    .huan{
        display: flex;
        flex-wrap: wrap;
        margin-top: 10px;
    }
    .xun{
        width: 40%;
        background-color: white;
        padding: 10px;
        margin: 6px;
        text-align: center;
        border-radius: 10px;
    }
    .hot{
        margin: 0 auto;
    }

</style>
